import React from 'react';
import {Table, Icon,Button,Popconfirm,message } from 'antd';
import {  Link} from 'react-router'
//引入标准Fetch及IE兼容依赖
import 'whatwg-fetch';
import  config from '../../assets/config';
export default class myTable extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            tDate: [],
            loading:true,
            totalPage:0
        }    
    }
    getList=(pn=1,ps=10)=>{
        this.setState({loading:true});
        fetch(config.base+"course/list?pageNum="+pn+"&&pageSize="+ps,{
                method: 'GET',
                mode: config.cors,
                headers: {'Content-Type':'text/plain;charset=UTF-8'}
            })
            .then(res=>{return res.json()})
            .then(rep=>{
                const data = []
                if(rep.total==null){message.error("暂时没有数据")}else{
                for (let i = 0; i <rep.list.length ; i++) {
                    data.push({
                        key: rep.list[i].id,
                        name: rep.list[i].name,
                        description:rep.list[i].description,
                        startTime: rep.list[i].startTime!=null?config.changeDate(rep.list[i].startTime.time):'未设置',
                        endTime: rep.list[i].endTime!=null?config.changeDate(rep.list[i].endTime.time):'未设置',
                        teacherName: rep.list[i].teacherName,
                        dutyName:rep.list[i].dutyName,
                        address:rep.list[i].address,
                        status:rep.list[i].status
                        })
                }

                this.setState({
                    tDate: data,
                    totalPage:rep.total,
                    loading:false
                })
                }
            })
            .catch((e)=>{
                    console.log(e.message);
                    message.error("网络错误请稍后重试");
                    this.setState({loading:false})
                })
        }
        
        onOver(index){
            const tDate = [...this.state.tDate];
            this.setState({loading:true});
            fetch(config.base+"course/over",{
                    method: 'POST',
                    mode: config.cors,
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    body:"id="+tDate[index].key
                })
                .then(res=>{return res.json()})
                .then(rep=>{
                this.setState({loading:false});
                if(rep.status==200){
                        message.success(rep.message)
                        tDate[index].status=2;
                        this.setState({ tDate });
                    }else{ 
                        message.error(rep.message)
                    }
                })
                .catch((e)=>{
                    console.log(e.message);
                    message.error("网络错误请稍后重试");
                    this.setState({loading:false})
                })
        }
        onDelete = (index) => {   	
            const tDate = [...this.state.tDate];
            this.setState({loading:true});
            fetch(config.base+"course/delete",{
                    method: 'POST',
                    mode: config.cors,
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    body:"id="+tDate[index].key
                })
                .then(res=>{return res.json()})
                .then(rep=>{
                this.setState({loading:false});
                if(rep.status==200){
                        message.success(rep.message)
                        tDate.splice(index, 1);
                        this.setState({ tDate });
                    }else{ 
                        message.error(rep.message)
                    }
                })
                .catch((e)=>{
                    console.log(e.message);
                    message.error("网络错误请稍后重试");
                    this.setState({loading:false})
                })
      	}
        componentDidMount() {
            this.getList();
        }
        render() {
            const tDate=this.state.tDate;
            const  columns = [{
                    title: '课程名称',
                    width: '10%',
                    dataIndex: 'name'
                }, {
                    title: '开始时间',
                    width: '10%',
                    dataIndex: 'startTime',
                },{
                    title: '结束时间',
                    width: '10%',
                    dataIndex: 'endTime',
                }, {
                    title: '课程简介',
                    width: '20%',
                    dataIndex: 'description'
                },{
                    title: '上课地点',
                    width: '10%',
                    dataIndex: 'address'
                }, {
                    title: '课程负责人',
                    width: '5%',
                    dataIndex: 'dutyName',
                    
                }, {
                    title: '课程老师',
                    width: '5%',
                    dataIndex: 'teacherName',
                    
                }, {
                    title: '操作',
                    width: '30%',
                    dataIndex: 'operate',
                    render:(text, record, index)=> {
                        return (<div><Link to={{pathname:"/courseUpdate",state:tDate[index].key}}>
                            <Button type="primary" htmlType="button" >编辑</Button></Link>&nbsp;&nbsp;
                            <Popconfirm title="确定结课?" onConfirm={()=>this.onOver(index)}>
                            <Button type="primary" htmlType="button" disabled={tDate[index].status==2} >{tDate[index].status!=2?'结课':'已结课'}</Button>
                            </Popconfirm>&nbsp;&nbsp;
                            <Popconfirm title="确定删除?" onConfirm={()=>this.onDelete(index)}>
                            <Button type="danger" htmlType="button"  >删除</Button>
                            </Popconfirm></div>)
                    }
                }];
            const pagination = {
                total: this.state.totalPage,
                showSizeChanger: true,
                onShowSizeChange:(current, pageSize)=>{
                    this.getList(current,pageSize)
                },
                onChange:(current)=>{
                    this.getList(current)
                }
            }

            return (
                <div>
                    <Link to={{pathname:"/courseAdd"}}><Button  htmlType="button"  >添加课程</Button></Link>
                    <br /><br />
                    <Table columns={columns} dataSource={tDate} bordered pagination={pagination} loading={this.state.loading} className="animated fadeInUp " />
                </div>
            )
        }
    }
